<template>
	<view>
		<uni-section title="">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="unitForm" :modelValue="form" label-position="left" label-width="120px"
					:rules="unitRules">
					<uni-forms-item label="单位名称" class="form_item" required name="unitName">
						<uni-easyinput v-model="form.unitName" placeholder="请输入单位名称" />
					</uni-forms-item>
					<uni-forms-item label="企业类型" class="form_item" required name="unitType">
						<view class="uni-px-5 uni-pb-5">
							<uni-data-select v-model="form.unitType" placeholder="请选择企业类型"
								:localdata="unitType.map(item => ({value: item.dictValue, text: item.dictLabel}))"></uni-data-select>
						</view>
					</uni-forms-item>
					<uni-forms-item label="联网状态" class="form_item" required name="onlineStatus">
						<uni-data-select v-model="form.onlineStatus" placeholder="请选择联网状态"
							:localdata="onlineStatus.map(item => ({value: item.dictValue, text: item.dictLabel}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="户籍化编码" class="form_item" required name="orgCode">
						<uni-easyinput v-model="form.orgCode" placeholder="请输入户籍化编码" />
					</uni-forms-item>
					<uni-forms-item label="组织机构编码" class="form_item" required name="unitCode">
						<uni-easyinput v-model="form.unitCode" placeholder="请输入组织机构编码" />
					</uni-forms-item>
					<uni-forms-item label="联网单位类型" class="form_item" required name="unitTypeId">
						<uni-data-select v-model="form.unitTypeId" placeholder="请选择联网单位类型"
							:localdata="updateUnitList.map(item => ({value: item.id, text: item.unitTypeName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="所属维保单位" class="form_item" required name="customMaintenanceUnitId">
						<uni-data-select v-model="form.customMaintenanceUnitId" placeholder="请选择所属维保单位"
							:localdata="customMaintenanceUnitList.map(item => ({value: item.id, text: item.unitName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="经济类型" class="form_item" required name="economicTypeId">
						<uni-data-select v-model="form.economicTypeId" placeholder="请选择经济类型"
							:localdata="economicTypeList.map(item => ({value: item.id, text: item.economicTypeName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="省" class="form_item" required name="provinceId">
						<uni-data-select v-model="form.provinceId" @change="getCityList(form.provinceId)"
							placeholder="请选择省"
							:localdata="regionAllList.map(item => ({value: item.id, text: item.regionName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="城市" class="form_item" required name="cityId">
						<uni-data-select v-model="form.cityId" @change="getDistrictList(form.cityId)"
							placeholder="请选择城市"
							:localdata="cityAllList.map(item => ({value: item.id, text: item.regionName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="区县" class="form_item" required name="districtId">
						<uni-data-select v-model="form.districtId" @change="getRegionList(form.districtId)"
							placeholder="请选择区县"
							:localdata="childrenAllList.map(item => ({value: item.id, text: item.regionName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="联网单位区域" class="form_item" required name="regionId">
						<uni-data-select v-model="form.regionId" @change="getRegionList(form.districtId)" disabled
							laceholder="请选择联网单位区域"
							:localdata="childrenAllList.map(item => ({value: item.id, text: item.regionName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="主管单位" class="form_item" required name="superviseOrgId">
						<uni-data-select v-model="form.superviseOrgId" @change="getRegionList(form.districtId)"
							placeholder="请选择主管单位"
							:localdata="getSupervisorlnitList.map(item => ({value: item.id, text: item.orgName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="单位地址" class="form_item" required name="address">
						<uni-easyinput v-model="form.address" placeholder="请输入单位地址" />
					</uni-forms-item>
					<uni-forms-item label="监管级别" class="form_item" required name="superviseLevelId">
						<uni-data-select v-model="form.superviseLevelId" @change="getRegionList(form.districtId)"
							placeholder="请选择监管级别"
							:localdata="superviseLevelList.map(item => ({value: item.id, text: item.superviseLevelName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="单位联系电话" class="form_item">
						<uni-easyinput v-model="form.tel" placeholder="请输入单位联系电话" />
					</uni-forms-item>
					<uni-forms-item label="维保开始日期" class="form_item" required>
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="form.maintenanceStartDate" />
					</uni-forms-item>
					<uni-forms-item label="维保结束日期" class="form_item" required>
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="form.maintenanceEndDate" />
					</uni-forms-item>
					<uni-forms-item label="行业分类" class="form_item">
						<uni-data-select v-model="form.industryId" @change="getRegionList(form.districtId)"
							placeholder="请选择行业分类"
							:localdata="industryAllList.map(item => ({value: item.id, text: item.industryName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="单位所属行业" class="form_item">
						<uni-data-select v-model="form.industryBelongId" @change="getRegionList(form.districtId)"
							placeholder="请选择单位所属行业"
							:localdata="belongAllList.map(item => ({value: item.id, text: item.industryName}))"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="单位标签" class="form_item">
						<uni-data-select v-model="form.unitTagIds" @change="getRegionList(form.districtId)"
							placeholder="请选择单位标签"
							:localdata="tagList.map(item => ({value: item.id, text: item.unitTagName}))"></uni-data-select>

					</uni-forms-item>
					<uni-forms-item label="消责人" class="form_item">
						<uni-easyinput v-model="form.responsibleManName" placeholder="请输入消责人" />
					</uni-forms-item>
					<uni-forms-item label="消责人电话" class="form_item">
						<uni-easyinput v-model="form.responsibleManTel" placeholder="请输入消责人电话" />
					</uni-forms-item>
					<uni-forms-item label="视频Url">
						<uni-easyinput type="textarea" v-model="form.controlCenterVideoUrl" placeholder="请输入视频Url" />
					</uni-forms-item>
					<uni-forms-item label="营业执照" name="businessLicense">
						<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" :limit="1" required
							:image-styles="imageStyles" @select="select" @delete="deleteFile" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('unitForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {
		getDicts
	} from "@/api/system/dict/data.js"
	import {
		listUnit,
		getUnit,
		delUnit,
		addUnit,
		updateUnit,
		allList,
		regionAllList,
		unitAllList,
		economicAllList,
		belongAllList,
		industryAllList,
		childrenCityList,
		childrenDistrictList,
		tagAllList,
		superviseLevel,
		getSupervisorlnit,
		getSupervisorUnit,
		unitPush
	} from "@/api/system/unit"
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'

	export default {
		data() {
			return {
				unitType: [],
				onlineStatus: [],
				updateUnitList: [],
				regionAllList: [],
				customMaintenanceUnitList: [],
				economicTypeList: [],
				belongAllList: [],
				industryAllList: [],
				superviseLevelList: [],
				tagList: [],
				cityAllList: [],
				childrenAllList: [],
				getSupervisorlnitList: [],
				form: {},
				imageValue: [], // 用于绑定文件列表
				imageStyles: {
					width: 100, // 图片显示宽度
					height: 100, // 图片显示高度
					border: { // 边框样式
						color: "#eee",
						width: "1px",
						style: "solid",
						radius: "10%"
					}
				},
				unitRules: {
					unitType: {
						rules: [{
							required: true,
							errorMessage: '企业类型不能为空'
						}]
					},
					unitId: [{
						required: true,
						message: "物联单位id不能为空",
						trigger: "blur"
					}],
					unitName: [{
						required: true,
						message: "单位名称不能为空",
						trigger: "blur"
					}],
					orgCode: [{
						required: true,
						message: "户籍化编码不能为空",
						trigger: "blur"
					}],
					unitTypeId: [{
						required: true,
						message: "联网单位类型不能为空",
						trigger: "blur"
					}],
					regionId: [{
						required: true,
						message: "联网单位所属区域不能为空",
						trigger: "blur"
					}],
					address: [{
						required: true,
						message: "单位地址不能为空",
						trigger: "blur"
					}],
					superviseOrgId: [{
						required: true,
						message: "主管单位不能为空",
						trigger: "blur"
					}],
					superviseLevelId: [{
						required: true,
						message: "监管级别不能为空",
						trigger: "blur"
					}],
					onlineStatus: [{
						required: true,
						message: "联网单位在线状态不能为空",
						trigger: "change"
					}],
					unitCode: [{
						required: true,
						message: "组织机构编码不能为空",
						trigger: "blur"
					}],
					customMaintenanceUnitId: [{
						required: true,
						message: "所属维保单位不能为空",
						trigger: "blur"
					}],
					maintenanceStartDate: [{
						required: true,
						message: "维保开始日期不能为空",
						trigger: "blur"
					}],
					maintenanceEndDate: [{
						required: true,
						message: "维保结束日期不能为空",
						trigger: "blur"
					}],
					businessLicense: [{
						required: true,
						message: "营业执照图片在线地址不能为空",
						trigger: "blur"
					}],
					economicTypeId: [{
						required: true,
						message: "联网单位经济类型不能为空",
						trigger: "blur"
					}],
				},
			}
		},
		created() {
			this.dictList()
		},
		methods: {
			dictList() {
				this.getUnitType()
				this.getOnlineStatus()
				this.getUpdateUnit()
				this.getRegionAllList()
				this.getCustomMaintenanceUnit()
				this.getEconomicTypeList()
				this.getBelongAllList()
				this.getIndustryAllList()
				this.getSuperviseLevel()
				this.getTagAllList()
			},
			getUnitType() {
				this.getDicts('unit_type').then(response => {
					this.unitType = response.data
				})
			},
			getOnlineStatus() {
				this.getDicts('online_status').then(response => {
					this.onlineStatus = response.data
				})
			},
			/** 单位标签 */
			getTagAllList() {
				tagAllList().then(response => {
					this.tagList = response.data
				})
			},
			/** 监管等级 */
			getSuperviseLevel() {
				superviseLevel().then(response => {
					this.superviseLevelList = response.data
				})
			},
			/** 国民经济 */
			getIndustryAllList() {
				industryAllList().then(response => {
					this.industryAllList = response.data
				})
			},
			/** 所属行业 */
			getBelongAllList() {
				belongAllList().then(response => {
					this.belongAllList = response.data
				})
			},
			/** 联网单位 */
			getUpdateUnit() {
				allList().then(response => {
					this.updateUnitList = response.data
				})
			},
			/** 行政区域 */
			getRegionAllList() {
				regionAllList().then(response => {
					this.regionAllList = response.data
				})
			},
			/** 城市 */
			getCityList(val) {
				childrenCityList(val).then(response => {
					this.cityAllList = response.data
				})
			},
			/** 县区 */
			getDistrictList(val) {
				childrenDistrictList(val).then(response => {
					this.childrenAllList = response.data
				})
			},
			/** 联网单位所在区域 */
			getRegionList(val) {
				getSupervisorUnit(val).then(response => {
					this.getSupervisorlnitList = response.data
				})
				this.form.regionId = val
			},
			/** 联网单位 */
			getCustomMaintenanceUnit() {
				unitAllList().then(response => {
					this.customMaintenanceUnitList = response.data
				})
			},
			/** 国民经济 */
			getEconomicTypeList() {
				economicAllList().then(response => {
					this.economicTypeList = response.data
				})
			},
			// 选择文件后触发
			select(e) {
				console.log('选择文件:', e);
				if (e.tempFilePaths.length > 0) {
					this.uploadFile(e.tempFilePaths[0]);
				}
			},

			// 删除文件时触发
			deleteFile(e) {
				console.log('删除文件:', e);
				this.imageValue = [];
			},

			// 上传文件到服务器
			uploadFile(filePath) {
				uni.uploadFile({
					header: {
						'Authorization': 'Bearer ' + getToken(), // 添加认证头
					},
					url: config.baseUrl + '/common/upload', // 若依框架的上传接口
					filePath: filePath,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data);
						if (res.code === 200) {
							this.$modal.msgSuccess("上传成功");
							// 这里可以处理上传成功后的逻辑，如保存文件路径到表单
							this.form.businessLicense = res.url;
						} else {
							this.$modal.msgError(res.msg);
						}
					},
					fail: (error) => {
						this.$modal.msgError("上传失败");
						console.error(error);
					}
				});
			},
			submit(ref) {
				console.log('success', ref);
				this.$refs['unitForm'].validate().then(res => {
					addUnit(this.form).then(response => {
						this.$modal.msgSuccess("新增成功！");
						this.form = {}
						uni.reLaunch({
						  url: '/pages/system/unit/unit'
						});
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

		}
	}
</script>

<style>
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.form_item {
		margin-bottom: 15px;
	}
</style>